<template>
	<view class="container">
		<view class="bgw" v-if="order">
			<view class="zgj-row vechile">
				<image class="brand" mode="aspectFit" :src="order.brand_logo"></image>
				<view class="carinfo">
					<text>{{order.brand_name}}</text>
					<text style="font-size: 13px;">{{order.vin}}</text>
				</view>
				<view class="sts"><span v-if="order.pay_state===1">{{order.state|orderState}}</span><span
						v-else>待支付</span></view>
			</view>
			<view class="zgj-row goods">
				<view class="gname th">配件名称</view>
				<view class="gquality th">品质</view>
				<view class="gprice th" style="text-align: right;">单价</view>
				<view class="gnum th" style="text-align: right;">数量</view>
				<view class="th" style="text-align: right;width: 20%;">小计</view>
			</view>
			<template v-for="item of order.items">
				<view class="zgj-row goods">
					<view class="gname">{{item.name}}</view>
					<view class="gquality">{{item.quality_name}}</view>
					<view class="gprice">{{item.price|money}}</view>
					<view class="gnum">{{item.num}}</view>
					<view class="gsum">{{item.amount|money}}</view>
				</view>
				<view class="zgj-row remark" v-if="item.remark">{{item.remark}}</view>
			</template>
			<view class="sum"><span>总金额：</span><span class="money">{{order.amount|money}}</span></view>
			<view><span>运费：</span><span>{{order.express_fee ? '包邮' : '到付'}}</span></view>
			<view><span>发票：</span><span>{{order.invoice ? '是' : '否'}}</span></view>
			<view><span>收货人：</span><span>{{order.contact}}</span></view>
			<view><span>联系电话：</span><span>{{order.contact_phone}}</span></view>
			<view><span>配送地址：</span><span>{{order.address}}</span></view>
			<view class="zgj-fx-c ordinfo">
				<text>订单编号：{{order.sn}}</text>
				<text>创建时间：{{order.create_time}}</text>
			</view>
			<button type="primary" :disabled="!payPrepared" v-if="order.pay_state!==1" style="margin: 20px 0;"
				@click="payOrder">立即支付</button>
		</view>
		<uni-pay v-if="order" ref="pay" @mounted="payMounted" @success="paySuccess" @create="payCreate"></uni-pay>
	</view>
</template>

<script>
	import UniPay from '../../components/zgj-pay/zgj-pay.vue'
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	var app = getApp()
	export default {
		components: {
			UniPay
		},
		data() {
			return {
				order: null,
				partImgs: [],
				voiceInfo: null,
				quotes: [],
				orderId: null,
				payPrepared: false,
				autopay: false
			}
		},
		computed: {
			userInfo() {
				return store.userInfo
			}
		},
		onLoad(e) {
			this.autopay = e.pay == 1
			console.log("load order", e, this.userInfo)
			this.loadData(e.id, e.pay)
		},
		onShow() {
			if (this.orderId) {
				this.loadData(this.orderId)
			}
		},
		methods: {
			payMounted() {
				this.payPrepared = true
				if (this.autopay) {
					console.log("mounted pay")
					this.payOrder()
				}
			},
			async loadData(id, pay) {
				this.$http.get('/web/ai/order', {
					id: id,
					user_id: this.userInfo._id
				}, (res) => {
					this.order = res
					if (res.audio_url) {
						this.voiceInfo = {
							url: res.audio_url,
							time: res.audio_time
						}
					}
					if (res.pics) {
						this.partImgs = res.pics.split(",")
					}
					if (res.enquiry) {
						res.enquiry.quoteList.forEach(o => {
							o.parts = this.buildQuotes(o.partList)
						})
						this.quotes = res.enquiry.quoteList
						console.log("quotes:", this.quotes)
					}
					this.orderId = res.id
					if (pay == 1 && this.payPrepared) {
						this.autopay = false
						console.log("payprepared", this.payPrepared)
						this.payOrder()


					}
				})
			},
			onphone(item) {
				console.log(item)
				var items = item.split(',')
				uni.showActionSheet({
					itemList: items,
					success: (e) => {
						let phone = items[e.tapIndex]
						uni.makePhoneCall({
							phoneNumber: phone
						})
					}
				})
			},
			payCreate(res) {
				console.log(res)
			},
			paySuccess(res) {
				console.log(res)
			},
			payOrder() {
				console.log("refs", this)
				console.log(this.$refs)
				this.$refs.pay.createOrder({
					provider: 'wxpay',
					total_fee: this.order.amount,
					order_no: this.order.sn,
					out_trade_no: `${this.order.sn}-1`,
					type: 'goods',
					description: this.order.brand_name + '配件'
				})
			}
		}
	}
</script>

<style lang="scss">
	.bgw {
		background-color: #fff !important;
		padding: 10px;
		font-size: 13px;

		.vechile {
			justify-content: space-between !important;
			align-items: center !important;
			padding-bottom: 10px;
			border-bottom: 1px solid $uni-border-color;

			.carinfo {
				display: flex;
				flex-direction: column;
				flex: 2;
			}

			.brand {
				width: 80px;
				height: 40px;
			}
		}



		.channel {
			justify-content: space-between !important;

			.ch-name {
				font-weight: 600;
			}
		}

		.ch-price {
			margin-left: 20px !important;
			color: $uni-color-error !important;
		}

		.ordinfo {
			padding-top: 10px;
			font-size: 13px;
		}

		.remark {
			width: 100%;
			font-size: smaller;
			color: $uni-color-warning;
		}

		.goods {
			width: 100%;
			display: flex;
			margin-top: 6px;
			font-size: 12px;
			flex-direction: row;
			align-items: center;

			.th {
				font-weight: 700;
				flex-grow: 0;
			}


			.gname {
				flex-grow: 0;
				width: 35%;
			}

			.gquality {
				flex-grow: 0;
				width: 15%;
			}

			.gprice {
				flex-grow: 0;
				width: 20%;
				text-align: right;
			}

			.gnum {
				flex-grow: 0;
				width: 10%;
				text-align: right;
			}

			.gsum {
				flex-grow: 0;
				width: 20%;
				text-align: right;
				color: $uni-color-warning;
			}
		}

		.sum {
			border-top: 1px solid $uni-border-color;
			margin-top: 10px;
			padding-top: 5px;
			width: 100%;
			font-size: 16px;
			text-align: right;

			.money {
				color: $uni-color-warning;
			}
		}
	}
</style>